import React, { useState } from 'react'
import { Input, Form, message } from 'antd'
import { ModalForm } from '@ant-design/pro-form';
import TreeTransfer from '@/components/TreeTransfer'
import { createGroup } from '@/services/group';

export default (props) => {

    const { unit: { formatUnitAndUserList }, checkedKeys } = props

    const [targetKeys, setTargetKeys] = useState(checkedKeys || [])


    const onChangeTransfer = (keys) => {
        setTargetKeys(keys)
    }

    const saveGroup = async (values) => {
        const result = await createGroup({
            ...values,
            isTmp: 0
        })
        if (result.code === 0) {
            message.success("群组创建成功")
            props.onCancel()
            props.callback()
        } else {
            message.error("群组创建失败")
        }
    }
    return (
        <ModalForm title="新建群组"
            visible={props.visible}
            width={600}
            modalProps={{
                destroyOnClose: true,
                onCancel: props.onCancel,
            }}
            onFinish={async (values) => {
                saveGroup(values)
            }}
            initialValues={{
            }}
        >
            <Form.Item
                label="群组名称"
                name="groupName"
                rules={[{ required: true, message: '请输入群组名称!' }]}
            >
                <Input placeholder="请输入群组名称" />
            </Form.Item>
            <Form.Item name="device[]" label="群组成员">
                <TreeTransfer
                    titles={['组织机构', '群组成员']}
                    targetKeys={targetKeys}
                    onChange={onChangeTransfer}
                    dataSource={formatUnitAndUserList}
                />
            </Form.Item>
        </ModalForm>
    )
}